//符
//个人信息页

<template>
  <div class="other_info_all">
    <!-- 信息介绍 -->
    <div class="basic_info_box_bg">
      <div class="basic_info_box">
        <!-- v-for="(item1, index) in basicInfoBOX" -->
        <!-- :key="index" -->
        <!-- 头像 -->
        <div class="head_pic1">
          <div class="head_pic1_radius">
            <div class="pic1">
              <img style="width: 100%; height: 100%" :src="avatar" alt="" />
            </div>
          </div>
        </div>
        <!-- 基本信息 -->
        <div class="basic_info">
          <div class="info_name">
            {{ basicInfoBOX.username }}
            <div class="collectBtn" @click="starUser()">
              <img
                src="../assets/like.png"
                alt=""
                v-if="isMy"
                v-show="!isStar"
              />
              <img
                src="../assets/solidCore.png"
                alt=""
                v-if="isMy"
                v-show="isStar"
              />
            </div>
          </div>
          <!-- <div><img :src="love" alt="" /></div> -->
          <!--喜欢按钮？-->
          <!-- <div class="info_age">{{ basicInfoBOX.birth }}</div> -->
          <!--此处原来改填出生日期？-->
          <div class="info_position">{{ basicInfoBOX.area }}</div>
          <div class="info_intro">{{ basicInfoBOX.description }}</div>
          <div
            class="other_data"
          >
            <div class="concern">
              关注&nbsp;<span>{{basicInfoBOX.stars }}</span>
            </div>
            <div class="fan">
              粉丝&nbsp;<span>{{ basicInfoBOX.fans }}</span>
            </div>
            <div class="reply">
              回复&nbsp;<span>{{ basicInfoBOX.comments }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ----------- -->

    <div class="concern_fan_love_list">
      <!-- 关注 -->
      <concern :concernBOX="concernBOX.slice(0, 6)" />
      <!-- 粉丝 -->
      <fan :fanBOX="fanBOX.slice(0, 7)" />
      <signTitle1 :xxTitle="favTitle" />
      <favSong ref="child_favsong" />
      <!-- 喜欢 -->
      <favAlbum ref="child_favalbum" />
      <favSongList ref="child_favsongList" />
      <whoSongList ref="child_whosongList" />
    </div>
  </div>
</template>
<script>
import signTitle1 from "../components/info_box/title1.vue";
import concern from "../components/info_box/concern.vue";
import fan from "../components/info_box/fan.vue";
import favSong from "../components/info_box/fav/fav_song.vue";
import favAlbum from "../components/info_box/fav/fav_album.vue";
import favSongList from "../components/info_box/fav/fav_songList.vue";
import whoSongList from "../components/info_box/who_songList.vue";
export default {
  name: "",
  components: {
    concern,
    fan,
    signTitle1,
    favSong,
    favAlbum,
    favSongList,
    whoSongList,
  },
  watch: {
    //id变化刷新页面
    ID: {
      handler(new_id) {
        if (new_id != JSON.parse(sessionStorage.getItem("ID"))) {
          this.isMy = true;
          if (sessionStorage.getItem("token")) {
            this.$http
              .get("/user/index/info/", {
                headers: {
                  Authorization:
                    "Bearer " + JSON.parse(sessionStorage.getItem("token")),
                },
                params: {
                  id: new_id,
                },
              })
              .then((res) => {
                this.basicInfoBOX = res.data.data;
                this.ID = res.data.data.id;
                this.pushdata();
                if (res.data.data.isStar == 1) {
                  this.isStar = true;
                } else {
                  this.isStar = false;
                }
              });
          } else {
            this.$http
              .get("/user/index/info/", {
                params: {
                  id: new_id,
                },
              })
              .then((res) => {
                this.basicInfoBOX = res.data.data;
                this.ID = res.data.data.id;
                this.pushdata();
              });
          }
        }
        this.$http
          .get("/user/index/stars/", {
            params: {
              limit: 6,
              id: new_id,
              page: 1,
            },
          })
          .then((res) => {
            this.concernBOX = res.data.data;
          });
        //get粉丝
        this.$http
          .get("/user/index/fans/", {
            params: {
              limit: 7,
              id: new_id,
              page: 1,
            },
          })
          .then((res) => {
            this.fanBOX = res.data.data;
          });
        if (this.infoFlag == 1) {
          this.$http
            .get("/user/index/info/", {
              params: {
                id: this.ID,
              },
            })
            .then((res) => {
              this.basicInfoBOX = res.data.data;
              this.ID = res.data.data.id;
              this.pushdata();
            });
        }
      },
    },
    immediate: true,
    //监听infoflag
    infoFlag() {},
  },
  created() {
    this.ID = this.$route.query.id;
    this.infoFlag == this.$route.query.infoFlag;
    //个人主页
    if (this.infoFlag == 0) {
      this.$http
        .get("/user/info/", {
          headers: {
            Authorization:
              "Bearer " + JSON.parse(sessionStorage.getItem("token")),
          },
        })
        .then((res) => {
          this.basicInfoBOX = res.data.data;
          this.ID = res.data.data.id;
          this.pushdata();
          this.isMy = false;
          sessionStorage.setItem("ID", JSON.stringify(res.data.data.id));
        });
    }
    //他人主页
    else if (this.infoFlag == 1) {
      if (sessionStorage.getItem("token")) {
        this.$http
          .get("/user/index/info/", {
            params: {
              id: this.ID,
            },
          })
          .then((res) => {
            this.basicInfoBOX = res.data.data;
            this.ID = res.data.data.id;
            this.pushdata();
            this.isMy = true;
          });
      } else {
        this.$http
          .get("/user/index/info/", {
            headers: {
              Authorization:
                "Bearer " + JSON.parse(sessionStorage.getItem("token")),
            },
            params: {
              id: this.ID,
            },
          })
          .then((res) => {
            this.basicInfoBOX = res.data.data;
            this.ID = res.data.data.id;
            this.pushdata();
            this.isMy = true;
            if (res.data.data.isStar == 1) {
              this.isStar = true;
            } else this.isStar = false;
          });
      }
    }
  },
  methods: {
    pushdata() {
      this.$refs.child_favsong.getdata(this.ID);
      this.$refs.child_favalbum.getdata(this.ID);
      this.$refs.child_favsongList.getdata(this.ID);
      this.$refs.child_whosongList.getdata(this.ID);
    },
    starUser() {
      if (sessionStorage.getItem("token")) {
        this.$http
          .post(
            "/star/user/",
            { followee: this.ID },
            {
              headers: {
                Authorization:
                  "Bearer " + JSON.parse(sessionStorage.getItem("token")),
              },
            }
          )
          .then((res) => {
            alert(res.data.msg);
            this.isStar = !this.isStar;
          });
      } else {
        alert("请先登录!");
      }
    },
  },
  data() {
    return {
      isStar: false, //是否关注
      isMy: true, //是否为自己登录
      ID: -1, //当前用户id
      infoFlag: 0, //判断是否渲染他人主页
      basicInfoBOX: "",
      avatar: require("../assets/mt-fuji-japan-view-from-kitadake-fuji-red-fuji-thumb.jpg"),
      favTitle: [{ sign: require("../assets/like.png"), who: "TA喜欢" }],
      otherDate: [{ stars: "24", fans: "12", comments: "99+" }],
      concernBOX: [],
      // ------
      fanBOX: [],
    };
  },
};
</script>
<style scoped>
a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
}
.other_info_all {
  width: 1314px;
  /* height: 4494px; */
  background: #ffffff;
  box-shadow: 0px 2px 27px 0px rgba(0, 0, 0, 0.47);
  margin: 0 auto;
  overflow: hidden;
}
.basic_info_box_bg {
  overflow: hidden;
  width: 100%;
  height: 459px;
  background: #21262c;
  box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.43);
}
.basic_info_box {
  /* overflow: hidden; */
  margin: 70px 80px 74px 72px;
  display: flex;
  justify-content: center;
  background-color: transparent;

  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.head_pic1 {
  overflow: hidden;
  width: 232px;
  height: 315px;
  background: #659274;
  box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.head_pic1_radius {
  width: 220px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.43);
  overflow: hidden;
}
.pic1 {
  /* overflow: hidden; */
  /* display: inline-block; */
  margin-right: -200px;
  width: 100%;
  height: 100%;
}
.basic_info {
  overflow: hidden;
  width: 890px; /**必须给定高 */
  margin-left: 40px;
}
.info_name {
  /* width: 104px;
height: 24px; */
  display: flex;
  align-items: center;
  margin: 40px 0 0 0;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  /* line-height: 24px; */
  margin-bottom: 20px;
}
.collectBtn {
  width: 28px;
  height: 24px;
  margin: 0 0 0 20px;
  background-color: transparent;
  overflow: hidden;
  transition: all 0.3s;
}
.collectBtn:hover{
  cursor: pointer;
  transform: scale(1.1);
}
.collectBtn img {
  width: 28px;
  height: 24px;
  transform: translateY(-80px);
  filter: drop-shadow(#659274 0 80px); /**？？？？？？？？？？？？？？ */
}
.info_age {
  margin: 13px 0 13px;
  /* width: 40px;
height: 18px; */
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 2px;
  /* line-height: 66px; */
}
.info_position {
  /* width: 75px;
height: 18px; */
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 20px;
}
.info_intro {
  /* width: 889px;
height: 46px; */
  margin: 16px 0 40px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 28px;
  letter-spacing: 2px;
}
.other_data {
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  /* width: 37px;
height: 18px; */
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 28px;
}
.fan {
  margin: 0 40px;
}
.concern,
.fan,
.reply {
  /* width: 37px;
height: 18px; */
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #ffffff;
  line-height: 28px;
  display: flex;
  align-items: center;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.other_data span {
  /* width: 26px;
height: 19px; */
  font-size: 24px;
  font-family: Impact;
  font-weight: 400;
  color: #659274;
  line-height: 28px;
  letter-spacing: 2px;
  text-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.43); /**为甚该属性值无效 */
}
.concern_fan_love_list {
  /* width: 1194px; */
  margin: 45px 60px 0;
}
/* 关注---------------------- */
/* .concern_box {
} */

/* 分页器 */
</style>
